<template>
    <div class="songListDetails">
        <div class="slide">
            <div class="img">
                <img :src="coverSrc" alt="">
            </div>
            <!-- 右侧信息 -->
            <div class="right">
                <div>
                    <h1><b>{{ listDetails.playlist_name }}</b></h1>
                    <div style="margin:1rem;">
                        <span>{{ listDetails.playlist_dsc }}</span>
                    </div>
                    <!-- 用户头像 -->
                    <div class="user">
                        <img class="head" :src="src" alt="">
                        <span>想去北海看海</span>
                        <span>{{ listDetails.create_time.substring(0, 10)}}-创建</span>
                    </div>
                </div>
                <!-- 右侧信息下方 -->
                <div class="right_b">
                    <el-button type="primary but" @click="newList" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bofangyinle"></use>
                        </svg>
                        播放全部
                    </el-button>
                    <el-button type="primary but" @click="pushList" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-addplaylist"></use>
                        </svg>  
                        添加至播放列表
                    </el-button>
                    <div v-if="isUser">
                    <el-button v-if="isCollect" type="primary but" @click="pushCollectList" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tianjiashoucang"></use>
                        </svg>
                        收藏该歌单
                    </el-button>
                    <el-button v-else type="primary but" @click="cancelCollectList" round>
                        <svg class="icon" style="color:red;" aria-hidden="true">
                            <use xlink:href="#icon-xingbiao-"></use>
                        </svg>
                        已收藏
                    </el-button>
                    </div>
                    <el-button v-if="!isUser" type="primary but" round>
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-bianji"></use>
                        </svg>  
                       编辑
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { url } from "@/apiUrl"//引入地址
import { mapState } from 'vuex'
export default {
    data(){
        return {
        }
    },
    props: {
    listDetails:{
    "playlist_id": 1242,
    "user_id": 2779271795,
    "playlist_name": "那些无限循环的歌",
    "playlist_coverUrl": "images/playlist/playlist_1242.jpg",
    "playlist_dsc": "喜欢就循环吧",
    "create_time": "2024-07-02T16:00:00.000Z"
},
        isCollect: false,
        isUser:false,
        songList:[],
        src:``,
        coverSrc:``
    },
    methods: {
        pushList() {
            this.$emit("pushList")//传递给父组件处理事件
        },
        newList() {
            this.$emit("newList")//传递给父组件处理事件
        },
        pushCollectList() {
            this.$emit("pushCollectList")
        },
        cancelCollectList() {
            this.$emit("cancelCollectList")
        },
    },
    // created() {
    // this.$emit("getdate")
    // // this.coverSrc=`${url}/${this.listDetails.playlist_coverUrl}` 
    // },
    // updated(){
    //     this.$emit("getdate")
    //     console.log("触发了初始化歌曲列表")
    // },
//   mounted(){
//     this.src=this.userMsg.avatar_url
//     this.coverSrc=`${url}/${this.listDetails.playlist_coverUrl}` 
//   }
}
</script>
<style lang="scss" scoped>
@import '../assets/common.scss';
.right_b{
    display: flex;
}
span{
    font-size: 13px;
}
.songListDetails {
    .right {
        width:69rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    img {
        width: 18.85rem;
        height: 18.85rem;
        border-radius: 5%;
        box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;    
    }
    .slide {
        display: flex;
        justify-content: flex-start;
        div {
            margin: 0 1.2rem;
            .user {
                width: 23rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .head {
                margin: 0.5rem 0;
                width: 4rem;
                height: 4rem;
                border-radius: 50%;
            }
        }
        .but {
            .icon {
                font-size: 2rem;
                margin-bottom: -0.2rem;
            }
        }
    }
}
</style>